<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <style type="text/css">
      body{width: 100%;height: 100%;margin: 0;padding: 0;}
      body, .p1, .p2 {font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;line-height: 24px;font-size: 20px;}
      .bg{background-image: url('https://cdn.jsdelivr.net/gh/aill66/cdn/1.jpg');background-size: 100%;height: 736px;margin: 0 auto;float: none;}
      .avatar{padding: 294px 29px 120px 29px;}
      .avatar img{width: 99px;height: 99px;border-radius:100%;border: solid 5px rgba(255, 255, 255, 0.5);}
      .avatar #nv{float: left;}
      .avatar #nan{float: right;}
      .text-center{text-align: center; color:#fe929e;}
      .btn{color: #fe929e; font-size: 24px; padding: 10px 120px;border: 1px solid #f8f8f8;border-radius: 10px;}
      .btn:hover{background: #9B59B6; border: 0 none;color: #fff;}
      .btn:visited {color: #fff;border: 1px solid #f8f8f8;}
      .btn:active{background: #1BA1E2; border: 0 none;color: #fff;}
    </style>
  </head>

  <body>
    <div class="layui-row">  
      <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 bg float-center">
        <a style="color:#fe929e; margin-top:10px; margin-left:10px; font-size:14px;" href="/love">返回</a> 
        <div class="avatar">
            <img id="nv" src="http://q1.qlogo.cn/g?b=qq&nk=1916309501&s=640">
            <img id="nan" src="http://q1.qlogo.cn/g?b=qq&nk=962033821&s=640">
        </div>
        <div class="text-center" style="color:#fe929e;"><p>我们相恋了</p><p id="elapseClock"></p></div>
        <div class="text-center" style="margin-top: 120px;">
          <a class="btn">我爱你</a>
        </div>
      </div>
    </div>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=5VYBZ-G2KH3-BJ332-3NPKN-JUNNJ-ZHBQE&referer=优启梦用户探测"></script>
    <!--您的Layui代码start-->
    <script type="text/javascript">
    layui.use(['layer'], function() {
      var $ = layui.$
      ,layer = layui.layer;

      $(document).ready(function() {
        layer.msg('欢迎来到我们的小窝！');
        var together = new Date();
        together.setFullYear(2019,10,19);   //时间年月日
        together.setHours(0);            //小时  
        together.setMinutes(0);          //分钟
        together.setSeconds(0);          //秒前一位
        together.setMilliseconds(0);     //秒第二位

        timeElapse(together);
        setInterval(function () {
          timeElapse(together);
        }, 1000);
        
        $('.btn').click(function(event) {
          console.log('test');
          layer.msg('么么哒！');
        });
         
      });
      var geolocation = new qq.maps.Geolocation();
      var options = {timeout: 3000};
      console.log(_DEFAULT_CITY);
      function timeElapse(date){
        var current = Date();
        var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
        var days = Math.floor(seconds / (3600 * 24));
        seconds = seconds % (3600 * 24);
        var hours = Math.floor(seconds / 3600);
        if (hours < 12) {
          hours = "0" + hours;
        }
        seconds = seconds % 3600;
        var minutes = Math.floor(seconds / 60);
        if (minutes < 60) {
          minutes = "0" + minutes;
        }
        seconds = seconds % 60;
        if (seconds < 60) {
          seconds = "0" + seconds;
        }
        var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒"; 
        $("#elapseClock").html(result);
      }
    });
    </script>
  </body>

</html>